<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /*#inp{*/
        /*    position: relative;*/
        /*    left: 100px;*/
        /*    top:0*/
        /*}*/
        .error{
            color: red;
            margin-left: 10px;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/jquery.validate.js" type="application/javascript"></script>
    <script src="js/jquery.validate.regex.js" type="application/javascript"></script>
    <script>
        // jQuery 表单验证
        $(function () {
            // $("input[name='userName']").blur(function () {
            //     console.log($(this).next().prop('tagName'))
            //     if ($(this).next().prop('tagName') == 'SPAN')
            //         $(this).next().remove()
            //     let reg = /^\w{6,20}$/
            //     if (!reg.test($(this).val())) {
            //         $(this).after("<span style=\"color: red\">用户名错误</span>")
            //         return true
            //     }
            //     return false
            // })
            // $("input[name='password']").blur(function () {
            //     if ($(this).next().prop('tagName') == 'SPAN')
            //         $(this).next().remove()
            //     let reg = /^\w{6,20}$/
            //     if (!reg.test($(this).val())) {
            //         $(this).after("<span style=\"color: red\">密码错误</span>")
            //         return true
            //     }
            //     return false
            // })
            // $("#sub").click(function () {
            //     if ($("input[name='userName']").trigger('blur') && $("input[name='password']").trigger('blur')) {
            //         //Ajax 提交
            //         $.post(
            //             "http://localhost:8080/user/login",
            //             {userName:$("input[name='userName']").val(),password:$("input[name='password']").val()},
            //             function (data) {
            //                 console.log(data)
            //             },
            //             'json')
            //     }
            // })
            $("#myForm").validate({
                rules: {
                    userName: {
                        required: true,
                        regex: /^\w{4,20}$/
                    },
                    password: {
                        required: true,
                        regex: /^\w{4,20}$/
                    }
                },
                messages: {
                    userName: {
                        required: "请输入姓名",
                        regex: "用户名格式不正确"
                    },
                    password: {
                        required: "请输入Email地址",
                        regex: "请输入正确的email地址"
                    }
                },
                submitHandler:function(form){
                    $.post(
                        "http://localhost:8080/user/login",
                        {userName: $("input[name='userName']").val(), password: $("input[name='password']").val()},
                        function (data) {
                            let {code,message} = data
                            console.log(code)
                            console.log(message)
                        },
                        'json')
                }
            });

        })

        //JS表单验证
        window.onload = function () {
            // let handleTime
            //
            // document.getElementById("img").onmousemove = function (){
            //     clearTimeout(handleTime)
            // }
            //
            // document.getElementById("img").onmouseout = function (){
            //     handleTime = setTimeout(changeImg, 3000)
            // }

            document.getElementsByName("userName")[0].onblur = checkUserName()

            function checkUserName() {
                let reg = /^\w{6,20}$/
                if (!reg.test(this.value)) {
                    //<span id="userNameError" style="color: red">用户名错误</span>
                    //提示操作

                    return false
                }
                return true
            }

            function checkPassword() {
                let reg = /^\w{6,20}$/
                if (!reg.test(this.value)) {
                    //<span id="userNameError" style="color: red">用户名错误</span>
                    //提示操作

                    return false
                }
                return true
            }

            document.getElementById("sub").onclick = function () {
                if (checkUserName()) {
                    console.log("submit")
                }
            }


            // let i = 1
            // function changeImg(){
            //     document.getElementById("img").src = "images/"+(++i)+".jpeg" //10s
            //     i = (i == 4) ? 0 : i
            //     handleTime = setTimeout(changeImg, 3000)
            // }
            //
            // let getTime = function () {
            //     let now = new Date()
            //     let hour = now.getHours();
            //     let minute = now.getMinutes()
            //     let second = now.getSeconds();
            //     document.getElementById("now").innerHTML = '<h1>' + hour + ':' + zero(minute) + ':' + zero(second) + '</h1>'
            // }
            //
            // let zero = function (num) {
            //     return num < 10 ? '0' + num : num
            // }
            //
            //
            // getTime()
            // setInterval(getTime, 1000)
            // //
            // handleTime = setTimeout(changeImg, 3000)
        }

    </script>
</head>
<body>
当前系统时间：
<div id="now">2024-06-19 22:10:30</div>
<div>
<form id="myForm">
    用户名：<input name="userName" type="text"><br>
    密码：<input name="password" type="password"><br>
    <input id="sub" type="submit" value="提交">
</form>
</div>


<div><img id="img" src="images/1.jpeg"></div>
</body>
</html>

